<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="mydiv">
    <table border="1">
        <tr>
            <td>员工编号</td>
            <td>员工姓名</td>
            <td>员工性别</td>
            <td>员工工资</td>
            <td>操作</td>
        </tr>
        <tr v-for="emp in empinfo">
            <td >{{emp.empno}}</td>
            <td>{{emp.ename}}</td>
            <td v-if="emp.gender==1">
                男
            </td>
            <td v-else>
                女
            </td>
            <td v-if="emp.sal>6000">
                高工资
            </td>
            <td v-else-if="emp.sal>3000">
                中等工资
            </td>
            <td v-else>
                低工资
            </td>
            <td>
                <input type="button" value="删除" v-on:click="deleteRow(emp.empno)">
                <input type="button" value="修改" v-on:click="updateRow(emp)">
            </td>

        </tr>
    </table>

<div>
    员工编号 <input type="text" v-bind:disabled="operator" v-model="emp.empno"><br/>
    员工姓名 <input type="text" v-model="emp.ename"><br/>
    员工性别 <input type="text" v-model="emp.gender"><br/>
    员工工资 <input type="text" v-model="emp.sal"><br/>
    <input type="button" v-bind:value="value" v-on:click="addRow()">
</div>
</div>

</body>
</html>
<script src="/js/vue.js"></script>
<script>

    let vue=  new Vue({
        el:"#mydiv",
        data:{
            value:"添加",
            operator:false,
            emp:[{empno:"",ename:"",gender:"",sal:""}],
            empinfo:[
                {empno:7788,ename:'小张1',gender:"1",sal:9999},
                {empno:7755,ename:'小张2',gender:"2",sal:6000},
                {empno:7777,ename:'小张3',gender:"1",sal:3000}
            ]
        },
        methods:{
            deleteRow:function (empno) {
              for (let i=0;i<this.empinfo.length;i++){
                  if (this.empinfo[i].empno==empno){
                      this.empinfo.splice(i,1);
                  }
              }
            },
            addRow:function () {
                if (!this.operator){
                    for (let i=0;i<this.empinfo.length;i++){
                            if (this.empinfo[i].empno==this.emp.empno){
                                alert("该员工已经存在");
                                this.emp.empno="";
                                this.emp.ename="";
                                this.emp.gender="";
                                this.emp.sal="";
                                return;
                            }
                    }
                    this.empinfo.push({empno:this.emp.empno,ename:this.emp.ename,gender:this.emp.gender,sal:this.emp.sal})
                    this.emp.empno="";
                    this.emp.ename="";
                    this.emp.gender="";
                    this.emp.sal="";

                }else {

                    for (let j=0;j<this.empinfo.length;j++){

                        if (this.empinfo[j].empno==this.emp.empno){
                            this.empinfo[j].ename=this.emp.ename;
                            this.empinfo[j].gender=this.emp.gender;
                            this.empinfo[j].sal=this.emp.sal;
                            break;
                        }
                    }
                    this.value="添加";
                    this.operator=false;
                    this.emp.empno="";
                    this.emp.ename="";
                    this.emp.gender="";
                    this.emp.sal="";
                }
            },
            updateRow:function(empar) {
                this.value="修改";
                this.operator=true;
                console.log(empar);
                this.emp.empno=empar.empno;
                this.emp.ename=empar.ename;
                this.emp.gender=empar.gender;
                this.emp.sal=empar.sal;
            }
        }
    })
</script>